<script setup>
import { reactive, ref, onMounted, toRaw, defineProps, watch, defineEmits } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const emit = defineEmits();
const props = defineProps({
  dialogselect: Boolean , // 是否可见
  Form: {}
});
const FormVo=ref({
  formId: "",
  modelName: "合同管理",
  status: "待审核",
  modelId: "htgl"
})
const dialogVisibleInner=ref(false)
watch(() => props.dialogselect, (newVal) => {
  if (newVal) {
    dialogVisibleInner.value = newVal;
    FormVo.value=props.Form
    getUser();
  }
});
const Users=ref([])
const getUser=(()=>{
  axios.get('/role/getUser')
      .then(resp=>{
        Users.value=resp.data
      })
      .catch(error=>{
        ElMessage.error(error)
      })
})
const selectedStations=ref([])
const handleSelectionChange = (selection) => {
  selectedStations.value = selection;

};
const confirmSelection=ref(()=>{
  if (selectedStations.value.length>1){
    alert("不可多选")
    return
  }
  console.log(selectedStations.value[0])
  FormVo.value.userId=Number(selectedStations.value[0].id);
  axios.post('/forms/submit',FormVo.value)
      .then(()=>{
        Users.value=null
        dialogVisibleInner.value=false
        emit('close', false);
        ElMessage.success("提交成功")
      })

})
</script>

<template>
  <el-dialog v-model="dialogVisibleInner" title="详情" @close="handlerClose">

    <el-card>
      <!-- 数据表格 -->
      <el-table :data="Users" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"/>
        <el-table-column type="index" label="序号" width="60" :index="(index) =>  index + 1"/>
        <el-table-column prop="name" label="姓名" width="200"/>
        <el-table-column prop="remark" label="备注" width="130"/>

      </el-table>
      <div style="text-align: right; margin-top: 10px;">
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </div>
    </el-card>
  </el-dialog>
</template>

<style scoped>

</style>